<template>
  <div class="nav">
    <div
      :class="{ active: active == item }"
      v-for="item in filters"
      :key="item"
      @click="$emit('selectList', $event)"
    >
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filters: ["全部", "未完成", "已完成", "清空已完成"],
    };
  },
  props: {
    active: {
      type: String,
      default: "全部",
    },
  },
};
</script>

<style scoped>
.nav {
  margin-top: 10px;
  display: flex;
}
.nav > div {
  cursor: pointer;
  margin-right: 8px;
}
.nav > div:hover {
  color: red;
}
.active {
  color: red;
}
</style>